<script lang="ts" setup>
import { onMounted } from '@vue/runtime-core'
withDefaults(
    defineProps<{
        // 标题
        title?: string,
        btns?: {
            id?: string,
            name: string,
            style?: string,
            click?: () => void
        }[]
    }>(),
    {
        title: '标题',
        btns: () => [{
            id: 'close',
            name: '关闭',
            style: '',
            click: () => {
                console.log('close!!')
            }
        }]
    }
);
</script>
<template lang="pug">
div(class="flex items-end justify-center bg-opacity-20 bg-black absolute top-0 left-0 w-screen h-screen lg:items-center overflow-hidden")
    div(class="container shadow-2xl max-w-lg bg-white transition-all lg:rounded-xl md:mx-10 animate-dialogIn-3 lg:animate-dialogIn-2 py-6 px-8 rounded-t-xl")
        .text-2xl.font-medium.text-black.pb-4.text-green-600 {{ title }}
        .text-green-500
            slot(name="message") Content
        .flex.justify-end.mt-6
            button(class="bg-green-500 text-white px-4 py-2 transition-all hover:bg-green-300 hover:shadow-md active:bg-green-400 lg:rounded-lg",v-for="btn in btns",@click="btn.click",:style="btn.style") {{btn.name}}
</template>
<style lang="scss" scoped>
.bg-login {
    background-image: url("/src/res/bg/login.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    // filter: blur(16px);
}
</style>